<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style-common.css">
    <link rel="stylesheet" type="text/css" href="css/style-information.css">

    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="js/commn.js"></script>
    <script src="js/information.js"></script>

</head>
<body>
<div id="head-wrapper">
    <div class="head">
        <div class="head-l">
            <a href="#" id="login">登录</a>
            <span>|</span>
            <a href="#" id="reg">免费注册</a>
        </div>
        <ul class="head-r">
            <li>
                <a href="#">设为首页</a>
            </li>
            <li>
                <a href="#">加入收藏</a>
            </li>
            <li>
                <a href="#">在线留言</a>
            </li>
            <li>
                <a href="#">企业位置</a>
            </li>
            <li>
                <a href="#">手机站</a>
            </li>
        </ul>

    </div>
</div>
<div id="logo-wrapper">
    <div class="logo">
        <div class="logo1">
            <a href="images/logo.png">
                <h1>天狗商城</h1>
            </a>
        </div>
        <form>
            <input type="text" class="tet"/>
            <input type="submit" value="搜索" class="sum"/>
        </form>
        <div class="buy">
            <img src="images/buy.png" alt="">
            <a href="#">我的购物车<span>0</span>件商品</a>
            <div>&gt;</div>
        </div>
    </div>
</div>
<div id="inner-wrapper">
    <div class="inner">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">商品商城</a>
            </li>
            <li>
                <a href="#">服装超市</a>
            </li>
            <li>
                <a href="#">公司新闻</a>
            </li>
            <li>
                <a href="#">人才招聘</a>
            </li>
            <li>
                <a href="#">在线留言</a>
            </li>
            <li>
                <a href="#">关于我们</a>
            </li>
            <li>
                <a href="#">外卖来了</a>
            </li>
            <li>
                <a href="#">场地预订</a>
            </li>
        </ul>
    </div>
</div>
<div id="main-wrapper">
    <div class="main">
        <div class="fir">
                    <a href="#">首页</a>  <span>>></span>
                    <a href="#">商城商品</a>  <span>>></span>
                    <a href="#">进口食品</a>  <span>>></span>
                    <p>零食品大礼包咪咪虾条18g*40薯片薯条批发休闲好吃的膨化小吃店
                    </p>
        </div>
        <h4 class="xxsm">
            <a href="javascript:;" onclick="test()">详细说明</a>
        </h4>
        <div class="main-show">
                    <div class="s-left">
                        <div class="midimg">
                            <img src="images/inform/s1s.jpg" alt="">
                            <div id="smlarea"></div>
                        </div>
                        <div id="lararea">
                            <img src="images/inform/s1s.jpg" alt=""  class="larimg">
                        </div>

                        <img src="images/inform/s1s.jpg" alt="" class="simg">

                        <div class="bian">产品编号：108545621
                            <a href="#"></a>
                            <a href="#"></a>
                            <a href="#"></a>
                            <a href="#"></a>
                            <div class="morebox1">
                                <a href="#" class="pl">+</a>
                                <div class="showbox1">
                                    <h4>分享到</h4>
                                    <ul>
                                        <li>
                                            <a href="#">一键分享</a>
                                        </li>
                                        <li>
                                            <a href="#">QQ空间</a>
                                        </li>
                                        <li>
                                            <a href="#">新浪微博</a>
                                        </li>
                                        <li>
                                            <a href="#">百度云收藏</a>
                                        </li>
                                        <li>
                                            <a href="#">微信</a>
                                        </li>
                                        <li>
                                            <a href="#">人人网</a>
                                        </li>
                                        <li>
                                            <a href="#">腾讯微博</a>
                                        </li>
                                        <li>
                                            <a href="#">百度相册</a>
                                        </li>
                                        <li>
                                            <a href="#">开心网</a>
                                        </li>
                                        <li>
                                            <a href="#">腾讯朋友</a>
                                        </li>
                                        <li>
                                            <a href="#">百度贴吧</a>
                                        </li>
                                        <li>
                                            <a href="#">豆瓣网</a>
                                        </li>
                                        <li>
                                            <a href="#">百度新首页</a>
                                        </li>
                                        <li>
                                            <a href="#">QQ好友</a>
                                        </li>
                                        <li>
                                            <a href="#">和讯微博</a>
                                        </li>
                                        <li>
                                            <a href="#">百度中心</a>
                                        </li>
                                    </ul>

                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="s-right">
                        <h4>零食品大礼包咪咪虾条18g*40薯片薯条批发休闲好吃的膨化小吃店</h4>
                        <div class="price">
                            <p>价格:<span class="pa"></span></p>
                            <div class="pri-r">
                                <span class="phon">
                                    <i class="iconfont">&#xe63a;</i>
                                        去手机购买
                                     <span>∨</span>
                                </span>
                                <a class="erweim">
                                <img src="images/inform/erweima.png" alt="">
                                </a>
                             </div>
                        </div>
                        <div class="sale">
                            <p>累计销量5623</p>
                            <p>累计评价0</p>
                        </div>
                        <div class="counts">
                            <p>购买数量：</p>
                            <a href="javascript:;" class="jian">-</a>
                            <span class="n">1</span>
                            <a href="javascript:;" class="jia">+</a>
                            <h6>总计:</h6>
                            <span class="zong"></span>
                        </div>
                        <div class="obuy">
                            <a href="#" id="buynow">立即购买</a>
                            <a href="#" class="join">加入购物车</a>

                        </div>
                    </div>

                </div>
        <div class="main-img">
                    <h3>产品介绍</h3>
                    <img src="images/inform/s12.jpg" alt="">
                    <img src="images/inform/s13.jpg" alt="">
                    <h3>产品参数</h3>
                    <div class="evalua">
                        <h3>所有评价(0)</h3>
                        <div class="eva-left">
                            <span>与描述相符<h6>0</h6></span>
                            <p>☆☆☆☆☆</p>
                        </div>
                        <div class="eva-right">
                            <div class="evashow"></div>
                            <ul>
                                <li>
                                    <span>1</span>
                                    <p>非常不满</p>
                                </li>
                                <li>
                                    <span>2</span>
                                    <p>不满意</p>
                                </li>
                                <li>
                                    <span>3</span>
                                    <p>一般</p>
                                </li>

                                <li>
                                    <span>4</span>
                                    <p>满意</p>
                                </li>
                                <li>
                                    <span>5</span>
                                    <p>非常满意</p>
                                </li>
                            </ul>
                        </div>
                    </div>

        </div>
    </div>
</div>
<div id="produ-wrapper">
    <div class="produ">
        <span class="rel">相关产品</span>
        <div class="pro">
            <ul id="myul">
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s11.jpg" alt="">
                    </a>
                    <span>￥30</span>
                    <a href="#" class="pp">
                        <p>优质金币金花生金条金元宝巧克</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s10.jpg" alt="">
                    </a>
                    <span>￥59</span>
                    <a href="#" class="pp">
                        <p>健达牛奶夹心巧克力条T8</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s9.jpg" alt="">
                    </a>
                    <span>￥69</span>
                    <a href="#" class="pp">
                        <p>日本生巧北海道ROYCE原味牛</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s8.jpg" alt="">
                    </a>
                    <span>￥1.63</span>
                    <a href="#" class="pp">
                        <p>瑞士进口 瑞士莲Lindor 软心球</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s7.jpg" alt="">
                    </a>
                    <span>￥278</span>
                    <a href="#" class="pp">
                        <p>Laderach瑞士进口手工巧克力</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s6.jpg" alt="">
                    </a>
                    <span>￥198</span>
                    <a href="#" class="pp">
                        <p>Baci芭喜意大利进口爱心巧克力</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s5.jpg" alt="">
                    </a>
                    <span>￥89</span>
                    <a href="#" class="pp">
                        <p>德芙巧克力礼盒装创意心形零食</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s4.jpg" alt="">
                    </a>
                    <span>￥49</span>
                    <a href="#" class="pp">
                        <p>喜糖 德芙Dove巧克力6克装</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s3.jpg" alt="">
                    </a>
                    <span>￥139</span>
                    <a href="#" class="pp">
                        <p>巧克力礼盒德芙巧克力礼盒装心</p>
                    </a>
                </li>
                <li>
                    <a href="#" class="proimg">
                        <img src="images/inform/s2.jpg" alt="">
                    </a>
                    <span>￥30.9</span>
                    <a href="#" class="pp">
                        <p>德芙士力架全家桶巧克力460g</p>
                    </a>
                </li>
            </ul>
            <div class="jiant">
                <a href="javascript:;" onclick="test()" class="lrow" id="lrow"><</a>
                <a href="javascript:;" onclick="test()" class="rrow" id="rrow">></a>
            </div>
        </div>


    </div>
</div>



<div id="bottom-wrapper">
    <div class="bottom">
        <div class="bt">
            <a href="#">关于我们</a>
            <a href="#">经典案例</a>
            <a href="#">新闻动态</a>
            <a href="#">服务项目</a>
            <a href="#">咨询团队</a>
            <a href="#">联系我们</a>
        </div>
        <h6>Copyright@2017  . All rights reserved.</h6>
        <span>天狗商城</span>
        <div class="bt1"><a href="#">技术支持：上海鲸米网络科技有限公司</a>
            <span>|</span>
            <a href="#">管理登录</a>
        </div>
    </div>
</div>


<div id="share-wra">
    <div class="share">分享</div>
    <div class="showbox">
        <h4>分享到</h4>
        <ul>
            <li>
                <a href="#">一键分享</a>
            </li>
            <li>
                <a href="#">QQ空间</a>
            </li>
            <li>
                <a href="#">新浪微博</a>
            </li>
            <li>
                <a href="#">百度云收藏</a>
            </li>
            <li>
                <a href="#">微信</a>
            </li>
            <li>
                <a href="#">人人网</a>
            </li>
            <li>
                <a href="#">腾讯微博</a>
            </li>
            <li>
                <a href="#">百度相册</a>
            </li>
            <li>
                <a href="#">开心网</a>
            </li>
            <li>
                <a href="#">腾讯朋友</a>
            </li>
            <li>
                <a href="#">百度贴吧</a>
            </li>
            <li>
                <a href="#">豆瓣网</a>
            </li>
            <li>
                <a href="#">百度新首页</a>
            </li>
            <li>
                <a href="#">QQ好友</a>
            </li>
            <li>
                <a href="#">和讯微博</a>
            </li>
            <li>
                <a href="#">百度中心</a>
            </li>
        </ul>
        <div class="smore">
            <a href="#" class="smorea">更多...</a>
        </div>
    </div>
</div>

<div class="morebox">
    <div class="stit">
        <p>分享到</p>
        <a href="#">X</a>
    </div>
    <ul>
        <li>
            <a href="#">一键分享</a>
        </li>
        <li>
            <a href="#">QQ空间</a>
        </li>
        <li>
            <a href="#">新浪微博</a>
        </li>
        <li>
            <a href="#">百度云收藏</a>
        </li>
        <li>
            <a href="#">微信</a>
        </li>
        <li>
            <a href="#">人人网</a>
        </li>
        <li>
            <a href="#">腾讯微博</a>
        </li>
        <li>
            <a href="#">百度相册</a>
        </li>
        <li>
            <a href="#">开心网</a>
        </li>
        <li>
            <a href="#">腾讯朋友</a>
        </li>
        <li>
            <a href="#">百度贴吧</a>
        </li>
        <li>
            <a href="#">豆瓣网</a>
        </li>
        <li>
            <a href="#">百度新首页</a>
        </li>
        <li>
            <a href="#">QQ好友</a>
        </li>
        <li>
            <a href="#">和讯微博</a>
        </li>
        <li>
            <a href="#">百度中心</a>
        </li>
        <li>
            <a href="#">美丽说</a>
        </li>
        <li>
            <a href="#">蘑菇街</a>
        </li>
        <li>
            <a href="#">点点网</a>
        </li>
        <li>
            <a href="#">花瓣</a>
        </li>
        <li>
            <a href="#">堆糖</a>
        </li>
        <li>
            <a href="#">和讯</a>
        </li>
        <li>
            <a href="#">飞信</a>
        </li>
        <li>
            <a href="#">有道云笔记</a>
        </li>
        <li>
            <a href="#">麦库记事</a>
        </li>
        <li>
            <a href="#">轻笔记</a>
        </li>
        <li>
            <a href="#">人民微博</a>
        </li>
        <li>
            <a href="#">新华微博</a>
        </li>
        <li>
            <a href="#">邮件分享</a>
        </li>
        <li>
            <a href="#">我的搜狐</a>
        </li>
        <li>
            <a href="#">摇篮空间</a>
        </li>
        <li>
            <a href="#">若邻网</a>
        </li>
        <li>
            <a href="#">天涯社区</a>
        </li>
        <li>
            <a href="#">股吧</a>
        </li>
        <li>
            <a href="#">Facebook</a>
        </li>
        <li>
            <a href="#">Twitter</a>
        </li>
        <li>
            <a href="#">linkedin</a>
        </li>
        <li>
            <a href="#">网易热</a>
        </li>
        <li>
            <a href="#">印象笔记</a>
        </li>
        <li>
            <a href="#">复制网址</a>
        </li>
        <li>
            <a href="#">打印</a>
        </li>
    </ul>
    <div class="b-share">
        <a href="#" class="b-share">百度分享</a>
    </div>
</div>

<div class="yuan">
    <a href="javascript:;" onclick="test()">×</a>
</div>

<div class="info">
    <a href="#" class="arrow1"><i class="iconfont">&#xe66c;</i></a>
    <ul>
        <li class="pho">
            <a href="#" class="iconfont">&#xe663;</a>
            <div class="tel hide">
                <h3>电话直呼</h3>
                <h6>15000499950</h6>
            </div>
        </li>
        <li class="icons">
            <a href="#" class="iconfont">&#xe660;</a>
            <a href="#" class="h1 hide">在线留言</a>
        </li>
        <li>
            <a href="#" class="iconfont">&#xe6eb;</a>
            <a href="#" class="h2 hide">发送邮件</a>
        </li>
        <li>
            <a href="#" class="iconfont">&#xe65c;</a>
            <a href="#" class="h3 hide">企业位置</a>
        </li>
    </ul>
    <a href="#" class="arrow2"><i class="iconfont">&#xe6ea;</i></a>
</div>

<div class="top-return">
    <a href="#">
        <img src="images/return.png" alt="">
    </a>
</div>
</body>
</html>